
<template>
  <div class="dx-detail-container">
    <!-- <div class="dx-header-container">
      <div><i class="dx-layer" /><span>请选择项目</span></div>
      <div v-if="proId">
        <router-link
          tag="i"
          :to="{ name: 'Dashboard' }"
          class="el-icon-close"
        />
      </div>
    </div> -->
    <div class="dx-header-container">
      <div><i class="dx-layer" /><span>请选择项目</span></div>
      <div>
        <router-link
          tag="i"
          :to="{ name: 'Dashboard' }"
          class="el-icon-close"
        />
      </div>
    </div>

    <div style="height: 50px; width: 100%; margin-top: 15px">
      <el-input
        placeholder="根据项目名称检索"
        v-model="input3"
        @input="inputChange"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="inputChange"
        ></el-button>
      </el-input>
    </div>
    <div class="dx-body-container">
      <div
        v-for="(item, index) in tableList"
        :key="item.id"
        class="list-container"
        :class="proNum === item.projectnumber ? 'active-project' : ''"
        @click="selectProject(item)"
      >
        <div class="list-index">{{ index + 1 }}</div>
        <div class="list-body">
          <div class="list-line">
            <div class="list-line-name">{{ item.name }}</div>
            <div class="list-line-icon" @click.stop="flyToThis(item)">
              <i class="el-icon-s-promotion"></i>
            </div>
          </div>
          <!-- <div class="list-line">
            <div class="list-line-lable">
              {{ item.projectnumber }}- {{ proNum }}
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <!-- <div class="dx-footer-container" v-if="!input3">
      <Pagination
        :total="parameters.total"
        :page="parameters.page"
        :limit="parameters.limit"
        @pagination="changePagination"
      />
    </div> -->
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index.vue";
//接口
import { getAllProjects } from "@/api/project";
import { mapState } from "vuex";
import DxCommonUtils from "@/utils/cesiumDxUtils/common3D";
import { Draw } from "ol/interaction";
var handler = null;
export default {
  name: "DataDisplay",
  data() {
    return {
      parameters: {
        page: 1,
        total: 81,
        limit: 20,
      },
      input3: "",
      tableList: [],
      dataAllLit: [],
    };
  },
  computed: {
    proNum() {
      return this.$store.getters.proNum || null;
    },
    ...mapState({
      projectList: (state) => state.app.projectList,
    }),
  },

  created() {},
  mounted() {
    // 清除数据
    // initGif
    this.getData();
    // 创建监听事件
    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction((clickEvent) => {
      var pick = viewer.scene.pick(clickEvent.position);
      if (
        Cesium.defined(pick) &&
        pick.id &&
        pick.id.id &&
        pick.id.id.indexOf("project") > -1
      ) {
        const name = pick.id.id.replace("project", "");
        this.projectInit(name);
      }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  },
  components: {
    Pagination,
  },
  methods: {
    // 获取数据
    async getData() {
      if (this.projectList && this.projectList.length) {
        this.dataAllLit = this.tableList = this.projectList;
        DxCommonUtils.positioningLabels.showSource();
        // this.tableList.forEach(async (item, index) => {
        //   const h = await this.drawProjectTOCesium(item.lon, item.lat);
        //   DxCommonUtils.positioningLabels.drawLable(item.lon, item.lat, h, {
        //     name: item.name,
        //     id: "project",
        //   });
        DxCommonUtils.cameraFlyTo({
          x: 107,
          y: 34,
          z: 8000000,
          heading: 0,
          pitch: -90,
          roll: -9,
        });
      } else {
        const obj = {
          page: this.parameters.page,
          size: this.parameters.limit,
        };
        getAllProjects(obj).then(async (resp) => {
          // this.parameters.total = resp.total;
          this.dataAllLit = resp || [];
          this.tableList = this.dataAllLit; // .slice(0, this.parameters.limit);
          this.$store.commit("app/SET_projectList", this.tableList);
          DxCommonUtils.positioningLabels.init().then(async () => {
            await this.tableList.forEach(async (item, index) => {
              const h = await this.drawProjectTOCesium(item.lon, item.lat);
              DxCommonUtils.positioningLabels.drawLable(item.lon, item.lat, h, {
                name: item.name,
                id: item.id,
              });
              DxCommonUtils.cameraFlyTo({
                x: 107,
                y: 34,
                z: 8000000,
                heading: 0,
                pitch: -90,
                roll: -9,
              });
            });
          });
        });
      }
    },
    async drawProjectTOCesium(lon, lat) {
      return await DxCommonUtils.toolsList.getHeigthByLonLat(lon, lat);
    },
    // 切换分页
    changePagination(data) {
      this.parameters.page = data.page;
      // this.settableList();
      this.getData();
    },
    // 处理数据
    settableList() {
      const s = (this.parameters.page - 1) * this.parameters.limit + 0;
      const e =
        (this.parameters.page - 1) * this.parameters.limit +
        this.parameters.limit;
      this.tableList = this.dataAllLit; // .slice(s, e);
    },
    // 输入框
    inputChange() {
      if (this.input3) {
        this.tableList = this.dataAllLit.filter((item) =>
          item.name.includes(this.input3)
        );
      } else {
        this.settableList();
      }
    },
    // 点击选择项目
    selectProject(data) {
      this.projectInit(data.name);

      this.$router.push({
        path: "/geological/theGeological/geologicalDisplay",
        query: { type: "drilling" },
      });
    },
    // 选中项目后相机飞入
    projectInit(name) {
      const data = this.tableList.find((item) => item.name === name) || null;
      if (data) {
        // 将项目信息存入store
        this.$store.commit("projectInformation/SET_PRO_INFO", {
          data: data,
        });
        // 判断是否存入
        const proNum = this.$store.getters.proNum || null;
        // 如果存在，直接跳转
        // DxCommonUtils.toolsList.calearAllDataSources();
        DxCommonUtils.positioningLabels.hideSource();
        this.flyToThis({
          lon: data.lon,
          lat: data.lat,
        });
        proNum && this.$router.push("/dashboard");
      }
    },
    delTheData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 飞入
    flyToThis(dat) {
      DxCommonUtils.cameraFlyTo({
        x: dat.lon,
        y: dat.lat + 0.005,
        z: 8000,
      });
    },
  },
  watch: {},
  destroyed() {
    handler = null;
  },
};
</script>

<style lang="scss" scoped>
.dx-body-container {
  .pro-name {
    flex: 1;
  }
  .pro-time {
    width: 100px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pro-unit {
    width: 200px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.active-project {
  color: #ffa500;
  border-color: #ffa500;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style>
.dx-detail-container .el-input__inner {
  background-color: transparent;
}

.dx-detail-container .el-input-group__append,
.dx-detail-container .el-input-group__prepend {
  background-color: transparent;
  vertical-align: middle;
  color: #fff;
  font-size: 20px;
}
</style>
